<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物品管理</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/css/inputfile.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/datagrid-detailview.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/template-native.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/other.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#articlelist').datagrid({
                title:"物品列表",
                pagination: true,
                iconCls: 'icon-save',
                remoteSort:false,
                singleSelect:true,
                nowrap:false,
                width: '100%',
                fitColumns:true,
                method: 'get',

                url:'${pageContext.request.contextPath}/articles/findByPage',
                // data: {
                //     total: 20,
                //     rows: [
                //         { "title": "二手iPhone XR", "typename":"数码产品", "price": "￥15.5", "createdate": "2019-11-28 12:30:25", "mode": 1, "status":1,"username":"张三"},
                //         { "title": "二手华为Mate3", "typename":"数码产品", "price": "￥15.5", "createdate": "2019-11-28 12:30:25", "mode": 2, "status":1,"username":"张三"},
                //         { "title": "二手书籍", "typename":"书籍", "price": "￥15.5", "createdate": "2019-11-28 12:30:25", "mode": 3, "status":0,"username":"张三"},
                //     ]
                // },
                columns: [
                    [
                        {field: 'title', title: '标题', width: 50, align: 'center'},
                        {field: 'type', title: '类型', width: 50, align: 'center', formatter: function (val) {
                                return val.name;
                            }},
                        {field: 'price', title: '价格', width: 50, align: 'center'},
                        {field: 'createdate', title: '发布时间', width: 80, align: 'center'},
                        {field: 'user', title: '发布人', width: 50, align: 'center', formatter: function (val) {
                                return val.name;
                            }},
                        {field: 'mode', title: '交易方式', width: 50, align: 'center', formatter: function (val, row,index){

                            if(val==1){
                                return '物品置换';
                            }else if(val==2){
                                return '现金交易';
                            }else{
                                return '物品求购';
                            }
                        }},
                        {field: 'status', title: '状态', width: 50, align: 'center', formatter: function (val, row,index){
                            return val==1?'<span style="color:green;">上架</span>':'<span style="color:red;">下架</span>';
                        }},
                    ]
                ],
                toolbar: "#tb",
                pagination: true,
                pageSize: 20,
                singleSelect: true,
                pageList: [5,10,20],
                view: detailview,
                detailFormatter: function(rowIndex, rowData){
                    let html = "<div style='height:400px;width:80%;overflow-x:scroll;overflow-y:scroll;'>"+rowData.title+"</div>"
                    return html;
                }

            });

            $("#dd").dialog({
                title: '商品编辑',
                closed:true,
                cache: false,
                fit:true,
                modal: true,
                iconCls: 'icon-save',
                buttons: [{
                    text:'提交',
                    iconCls:'icon-ok',
                    handler:function(){

                    }
                },{
                    text:'关闭',
                    handler:function(){
                        $("#dd").dialog("close");
                    }
                }]
            });

            $('#article_type').combobox({
                <%--url:"${pageContext.request.contextPath}/articletypes/findAll",--%>
                method:'get',
                valueField:'id',
                textField:'name',
                panelHeight:'auto',
            });

            var list = [{'id': '', name: '全部','selected':true}];
            $.ajax({
                url:"${pageContext.request.contextPath}/articletypes/findAll",
                method:'get',
                datatype: 'json',
                success: function (res) {
                    for (let a of res){
                        // console.log(type);
                        list.push({"id": a.id, "name": a.name });
                    }
                    $("#article_type").combobox("loadData", list);
                }
            })


            <%--$('#standardQueryBtn').linkbutton({--%>
                <%--onClick(){--%>
                    <%--// console.log(1111);--%>
                    <%--console.log($('#btn').linkbutton('options').disabled);--%>
                    <%--$.ajax({--%>
                        <%--url: '${pageContext.request.contextPath}/articles/findByCondition',--%>
                        <%--data:--%>
                        <%--dataType: 'json',--%>
                        <%--success: function (res) {--%>

                    <%--}--%>
                    <%--})--%>
                <%--}--%>
            <%--})--%>

        });

        function searchArticle() {
            var title = $("#article_name").val();
            let type = $("#article_type").combobox("getValue");
            let mode = $("#article_mode").combobox("getValue");
            console.log(title);
            console.log(type);
            console.log(mode);
            $('#articlelist').datagrid({
                queryParams:{
                    title, type, mode
                }
            });
        };


    </script>

</head>
<body style="margin:8px;">
<div id="tb" style="padding:3px">
    <input id="article_name"  class="easyui-textbox"style="width:200px;" data-options="label:'标题：',labelWidth:50,labelAlign:'right'">
    <select id="article_type" class="easyui-combobox"style="width:200px;" data-options="label:'物品类型：',labelWidth:70,labelAlign:'right',panelHeight:'auto'">
        <%--<option value="">全部</option>--%>
        <%--<option value="0">数码产品</option>--%>
        <%--<option value="1">书籍</option>--%>
        <%--<option value="2">衣服</option>--%>
    </select>
    <select id="article_mode" class="easyui-combobox" style="width:200px;" data-options="label:'交易方式：',labelWidth:70,labelAlign:'right',panelHeight:'auto'">
        <option value="">全部</option>
        <option value="1">物品置换</option>
        <option value="2">现金交易</option>
        <option value="3">物品求购</option>
    </select>
    <a id="standardQueryBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="searchArticle()">搜索</a>
</div>

<table id="articlelist"></table>

</body>
</html>
